<template>
	<view class="container">
		<my-nav-search title="标注"></my-nav-search>
		<view class="content">
			<view class="title flex-row-center">
				<image :src="labelData.img" mode=""></image>
				<text>{{labelData.title || ""}}</text>
			</view>
			<view class="label">
				<view class="label-text">标注内容: </view>
				<textarea class="my-textarea" v-model="value"></textarea>
			</view>
			<button class="form-btn" @click="handleLabel">标注</button>
		</view>
	</view>
</template>

<script>
	import myNavSearch from "./my-nav-search.vue"
	export default {
		name: "my-label",
		components: {
			myNavSearch,
		},
		props: {
			labelData: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				value: ""
			};
		},
		methods: {
			handleLabel() {
				console.log("标注")
				this.$emit("handleLabel", this.value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		--textarea-height:240rpx;
	}
	.content {
		padding: 30rpx;
	}

	.title {
		image {
			display: block;
			width: 140rpx;
			height: 100rpx;
			margin-right: 30rpx;
			border-radius: 20rpx;
		}

		text {
			font-size: 32rpx;
		}
	}

	.label {
		margin-bottom: 40rpx;

		.label-text {
			height: 104rpx;
			line-height: 104rpx;
			font-size: $text-size;
			color: #6F6F6F;
		}

	}
</style>